<template>
  <div class="combined-container">
    <div class="search-summary">
      <div class="summary-header">
        <svg viewBox="0 0 24 24" width="14" height="14">
          <path fill="#4e6ef2" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
        </svg>
        <span>已阅读 {{ searchResults.length }} 个网页</span>
      </div>
      <div class="search-tags-grid">
        <div 
          v-for="(result, index) in visibleResults" 
          :key="index"
          class="search-tag"
          @click="$emit('tag-click', result)">
          {{ result.name }}
        </div>
        <div 
          v-if="hasMoreResults" 
          class="search-tag more"
          @click="$emit('toggle-results')">
          {{ isExpanded ? '收起' : `+${remainingResults}` }}
        </div>
      </div>
      <div v-if="!aiAnswer" class="loading-status">
        <div class="loading-spinner"></div>
        <span class="loading-text">正在推理搜索...</span>
      </div>
    </div>

    <div class="content-divider"></div>

    <div class="ai-response">
      <template v-if="aiAnswer">
        <div class="ai-content" v-html="formatContent(currentText)"></div>
        <span v-if="isTyping" class="typing-cursor"></span>
      </template>
    </div>

    <div class="message-meta">
      <span class="timestamp">{{ formatTime(new Date().toISOString()) }}</span>
    </div>
  </div>
</template>

<script setup>
import { marked } from 'marked';

defineProps({
  searchResults: {
    type: Array,
    required: true
  },
  visibleResults: {
    type: Array,
    required: true
  },
  hasMoreResults: {
    type: Boolean,
    required: true
  },
  isExpanded: {
    type: Boolean,
    required: true
  },
  remainingResults: {
    type: Number,
    required: true
  },
  aiAnswer: {
    type: String,
    default: ''
  },
  currentText: {
    type: String,
    default: ''
  },
  isTyping: {
    type: Boolean,
    default: false
  }
});

defineEmits(['tag-click', 'toggle-results']);

const formatContent = (content) => {
  if (!content) return '';
  return marked(content);
};

const formatTime = (isoString) => {
  const date = new Date(isoString);
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};
</script>

<style scoped>
.combined-container {
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.search-summary {
  padding: 12px 16px;
  background: white;
  border-bottom: 1px solid #eaecef;
  position: relative;
}

.summary-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4e5969;
  font-size: 13px;
  margin-bottom: 8px;
}

.search-tags-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.search-tag {
  padding: 6px 10px;
  background: #f5f5f5;
  border-radius: 4px;
  color: #333;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.search-tag:hover {
  background: #e8e8e8;
}

.search-tag.more {
  color: #4e6ef2;
  background: #f0f7ff;
  text-align: center;
}

.search-tag.more:hover {
  background: #e6f0ff;
}

.loading-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #e8eaed;
  border-top: 2px solid #4e6ef2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 13px;
  color: #4e5969;
}

.content-divider {
  height: 1px;
  background: #eaecef;
  margin: 0;
}

.ai-response {
  padding: 16px;
  width: 100%;
}

.ai-content {
  color: #1a1a1a;
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
  position: relative;
  width: 100%;
}

.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 16px;
  background-color: #4e6ef2;
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.message-meta {
  padding: 8px 16px;
  border-top: 1px solid #eaecef;
}

.timestamp {
  color: #8590a6;
  font-size: 12px;
}

@media (max-width: 768px) {
  .search-tags-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  
  .search-tag {
    padding: 4px 8px;
    font-size: 12px;
  }

  .loading-status {
    margin-top: 6px;
  }

  .loading-text {
    font-size: 12px;
  }
}
</style> 